<template>
	<view class="zy_form_item_container">
		<view :class="{'zy_form_display_item':labelPosition=='right'||labelPosition=='left'}" class="zy_form_item">
			<view :style="[{width:`${width}px`}]" class="zy_form_item_label"
				:class="{'zy_form_item_label_right':labelPosition=='right','zy_form_item_label_left':labelPosition=='left','zy_form_item_label_top':labelPosition=='top'}">
				<view class="zy_form_item_required">
					<text v-if="required">*</text>
				</view>
				<span class="p" :style="[{fontSize:`${labelSize}rpx`,fontWeight:`${labelWeight}`,color:`${labelColor}`}]">
					{{label}}</span>
			</view>
			<view class="zy_form_item_slot">
				<slot></slot>
				<view v-if="required&&errorMsg" class="zy_form_item_slot_message">
					{{errorMsg}}
				</view>
			</view>
		</view>
		<view class="zy_form_border_item" v-if="border||borderBottom"></view>
	</view>
</template>

<script>
	import props from "./props.js";

	export default {
		props: {
			//标签文本
			label: {
				type: String,
				default: ''
			},
			//表单域标签的的宽度
			labelWidth: {
				type: String,
				default: ''
			},
			//表单域标签的字体大小，默认大小36rpx
			labelSize: {
				type: Number,
				default: 36
			},
			//表单域标签的的字体加粗，默认不加粗
			labelWeight: {
				type: String,
				default: ''
			},
			//表单域标签的的字体颜色
			labelColor: {
				type: String,
				default: ''
			},
			//表单的下边框是否显示
			border: {
				type: Boolean,
				default: true
			},
			required: {
				type: Boolean,
				default: false
			},
			prop: {
				type: String,
				default: ''
			},
			message: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				propsChange: [],
				watchWidth: '', //监听label宽度
				width: '',
				labelPosition: '',
				borderBottom: '',
				model: {},
				// required: false,
				index: '',
				errorMsg: '',
				parentData: {},
			}
		},
		mounted() {
			if (this.$parent.propsChange) {
				this.propsChange = this.$parent.propsChange
			} else {
				this.propsChange = this.$parent.$parent.propsChange
			}
			this.$nextTick(() => {
				if (!this.width) {
					this.width = this.propsChange.labelWidth
				}
				this.labelPosition = this.propsChange.labelPosition
				this.borderBottom = this.propsChange.border
				this.model = this.propsChange.model
			})
		},
		// 监听父组件传值
		watch: {
			labelWidth: {
				handler(val) {
					this.width = val
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
			message: {
				handler(val) {
					this.message = val
				},
				deep: true, // 深度监听
				immediate: true, // 初次监听即执行  
			},
			parentProps(n) {
				if (n) {
					// 	console.log(n)
					// const propertyChain = n.message
					// const propertyName =propertyChain[propertyChain.length - 1];

					// 	console.log(propertyName)
					Object.keys(this.model).forEach((value, key) => {
						if (n && n.name == value) {
							this.required = true
							this.errorMsg = this.message
						}
					})
				}
			}
		},
		computed: {
			parentProps() {
				return this.$parent.propsChange.error
			},
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.zy_form_item_container {}

	.zy_form_border_item {
		border-bottom: 1rpx solid #e9e9e9;
	}

	.zy_form_display_item {
		display: flex;
	}

	.zy_form_item {
		width: 100%;
		padding: 15rpx 0;
		min-height: 100rpx;
		margin: auto 0;
	}

	.zy_form_item_required {
		color: #ff0000;
		width: 20rpx;
		text-align: center;
	}

	.zy_form_item_label {
		display: flex;
		margin: auto 0;
		letter-spacing: 0.1rem;
	}

	.zy_form_item_label_right {
		text-align: right;
		justify-content: flex-end;
	}

	.zy_form_item_label_left {
		text-align: left;
	}

	.zy_form_item_label_top {
		margin: 25rpx 0;
	}

	.zy_form_item_slot {
		margin: auto 0;
		width: 100%;
	}

	.zy_form_item_slot_message {
		font-size: 26rpx;
		color: #ff0000;
		text-align: left;
		margin: 0 15rpx;
	}
</style>